<template>
  <div class="page">
    <div class="navigation">
      <div class="navigation-logo">
        <span></span>
      </div>
      <div class="navigation-list">
        <ul>
          <li :class="[active=='smart'?'active':'']" @click="tabNavigtion('smart')">
            <div class="normal">
              <i class="analysis"></i>小智分析
            </div>
            <div class="special">

            </div>
          </li>
          <li :class="[active=='project'?'active':'']" @click="tabNavigtion('project')">
            <div class="normal">
              <i class="project"></i>项目
            </div>
            <div class="special">

            </div>
          </li>
          <li :class="[active=='task'?'active':'']" @click="tabNavigtion('task')">
            <div class="normal">
              <i class="task"></i>任务
            </div>
            <div class="special">

            </div>
          </li>
          <li :class="[active=='workingCircle'?'active':'']" @click="tabNavigtion('workingCircle')">
            <div class="normal">
              <i class="working"></i>工作圈
            </div>
            <div class="special">

            </div>

          </li>
          <li :class="[active=='application'?'active':'']" v-if="this.$store.state.userInfo.transferAdmin" @click="tabNavigtion('application')">
            <div class="normal">
              <i class="application"></i>应用
            </div>
            <div class="special">

            </div>
          </li>
        </ul>
      </div>
      <div class="navigation-user">
        <ul class="handle-list">
          <li :class="['mail_icon',active=='mail'?'active':'']" @click="toMail"></li>
          <li :class="['info_icon',active=='notify'?'active':'']" @click="toNotify">
            <span class="info-num" v-if="this.$store.state.countUnRead.allCount>0">{{this.$store.state.countUnRead.allCount}}</span>
          </li>
          <li :class="['ht_icon',active=='ht'?'active':'']" @click="toHt"></li>
          <li :class="['help_icon',active=='help'?'active':'']" v-show="false"></li>
        </ul>
        <ul class="user-info">
          <li class="user-img" :style="{backgroundImage: 'url('+ (!!this.$store.state.userInfo.headImage == true ? this.$store.state.userInfo.headImage : defaultHeadImg) +')'}"></li>
          <li class="user-name">{{this.$store.state.userInfo.name}}<i></i></li>
          <div class="set-box">
            <p @click="is_show_headPortrait=true">个人设置</p>
            <p @click="is_show_my_code=true">我的企业码</p>
            <p @click="is_show_resetPassword=true">修改密码</p>
            <p @click="loginOut">退出</p>
          </div>
        </ul>
      </div>
    </div>
    <!--    重置密码弹框-->
    <div v-if="is_show_resetPassword">
      <resetPassword @close="closeResetPassword"></resetPassword>
    </div>
    <div v-if="is_show_headPortrait">
      <headPortrait @close="closeHeadPortrait"></headPortrait>
    </div>
    <!--    重置密码弹框-->
    <!--    我的企业码-->
    <div class="my-code" v-if="is_show_my_code">
      <div class="my-code-inner">
        <div class="title">
          企业码
          <i @click="is_show_my_code=false"></i>
        </div>
        <p class="code-info">
          我的企业码：<span>{{this.$store.state.userInfo.comCode}}</span>
        </p>
        <p class="tips">点击“复制”按钮复制粘贴到微信和QQ即可完成分享</p>
        <div class="btn" @click="copyMyCode">复制</div>
      </div>
    </div>
    <!--    我的企业码-->
  </div>
</template>
<script>
  import resetPassword from '@/components/resetPassword/index';
  import headPortrait from '@/components/resetPassword/headPortrait';
  export default {
    components: {
      resetPassword,headPortrait
    },
    data() {
      return {
        active: 'smart',
        is_show_resetPassword: false,
        is_show_my_code: false,
        is_show_headPortrait:false,
        defaultHeadImg:require('../../assets/img/ic_tx_gzq.png')
      }
    },
    watch: {
      $route() {
        let arr = this.$route.path.split("/");
        console.log(arr[1]);
        this.active = arr[1];
      }
    },
    created() {
      this.active = this.$store.state.navActive || 'smart';
    },
    mounted() {

    },
    methods: {
      //查询未读消息
      queryCountUnRead(){
        this.$http.get('user/user/push/msg/countUnRead',{params:{
            userId:this.$store.state.userInfo.userId,
          }}).then(res=>{
          if(res.statusCode==200){
            this.$store.commit('SET_COUNT_UNREAD', res.data);
          }else {

          }
        });
      },
      //退出
      loginOut() {
        localStorage.clear();
        this.$router.push({path: '/login'});
        this.active = 'smart';
      },
      //复制企业吗
      copyMyCode() {
        let copy_text = `企业码：${this.$store.state.userInfo.comCode}`;
        let oInput = document.createElement('input');
        oInput.value = copy_text;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        oInput.style.display = 'none';
        document.body.removeChild(oInput);
        this.$message.success("复制成功");
        this.is_show_my_code = false;
      },
      closeResetPassword() {
        this.is_show_resetPassword = false;
      },
      closeHeadPortrait(){
        this.is_show_headPortrait=false;
      },
      toNotify() {
        // this.active = 'notify';
        this.$router.push({
          path: '/notify'
        });
      },
      toMail() {
        // this.active = 'mail';
        this.$router.push({
          path: '/mail'
        });
      },
      tabNavigtion(active) {
        this.active = active;
        this.$store.commit('SET_NAV_ACTIVE', this.active);
        this.queryCountUnRead();
        if (active == 'project') {
          this.$router.push({
            path: '/project/bulletinBoard', query: {
              projectId: 'all', attention: '', type: 1
            }
          });
        } else if (active == 'task') {
          this.$router.push({
            path: '/task',
          });
        } else if (active == 'smart') {
          this.$router.push({
            path: '/smart',
          });
        } else if (active == 'workingCircle') {
          this.$router.push({
            path: '/workingCircle/workingCircleProject',
            query: {
              projectId: '', type: 1
            }
          });
        }else if(active == 'application'){
          this.$router.push({
            path: '/application',
          });
        }
      },
      toHt() {
        this.active = 'ht';
        if (this.$store.state.userInfo.userAdmin) {
          this.$router.push({
            path: '/ht'
          });
        } else {
          if (this.$store.state.userInfo.adAdmin) {
            this.$router.push({
              path: '/ht/administratorManagement'
            });
          } else {
            if (this.$store.state.userInfo.baseAdmin) {
              this.$router.push({
                path: '/ht/comprehensiveSetup'
              });
            } else {
              this.$router.push({
                path: '/ht/myTemplate'
              });
            }
          }
        }


      },
    }
  }
</script>

<style lang="scss" scoped type="text/scss">
  .navigation {
    height: 72px;
    display: flex;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(19, 34, 45, 0.06);

    .navigation-logo {
      width: 280px; //设置基础宽度
      position: relative;
      /*flex-grow: 1; //父容器剩余空间按 1:2 的比例分配给子容器*/
      > span {
        position: absolute;
        background-image: url("../../assets/img/ic_logo.png");
        background-position: center;
        background-size: 179px 41px;
        background-repeat: no-repeat;
        width: 179px;
        height: 41px;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .navigation-list {
      flex-basis: 776px; //设置基础宽度
      flex-grow: 2; //父容器剩余空间按 1:2 的比例分配给子容器
      padding: 16px 0;

      ul {
        display: flex;
        justify-content: center;

        li {
          position: relative;
          margin-left: 40px;

          .normal {
            text-align: right;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            cursor: pointer;
            position: relative;
            border-radius: 6px;
            z-index: 100;

            i {
              width: 18px;
              height: 18px;
              display: inline-block;
              vertical-align: middle;
              margin-right: 8px;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .project {
              background-image: url("../../assets/img/nav/ic_project_nor.png");
            }

            .task {
              background-image: url("../../assets/img/nav/ic_job_nor.png");
            }

            .analysis {
              background-image: url("../../assets/img/nav/ic_chart_nor.png");
            }

            .working {
              background-image: url("../../assets/img/nav/ic_circle-of-work_nor.png");
            }

            .application {
              background-image: url("../../assets/img/nav/ic_apply_nor.png");
            }
          }

          .special {
            width:0px;
            height: 40px;
            background-color: #0a52e4;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /*transition: width 0.5s linear;*/
          }
        }

        li:first-child {
          margin-left: 0;
        }

        li.active {
          color: #FFFFFF;

          .special {
            width: 100%;
            background-color: #0a52e4;
            color: #FFFFFF;
            border-radius: 8px;
          }

          .project {
            background-image: url("../../assets/img/nav/ic_project_pre.png");
          }

          .task {
            background-image: url("../../assets/img/nav/ic_job_pre.png");
          }

          .analysis {
            background-image: url("../../assets/img/nav/ic_chart_pre.png");
          }

          .working {
            background-image: url("../../assets/img/nav/ic_circle-of-work_pre.png");
          }

          .application {
            background-image: url("../../assets/img/nav/ic_apply_pre.png");
          }
        }
      }
    }

    .navigation-user {
      width: 400px; //设置基础宽度
      display: flex;

      .handle-list {
      height: 24px;
        padding-top: 26px;

        li {
          float: left;
          width: 24px;
          height: 24px;
          margin-left: 30px;
          cursor: pointer;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }

        li.mail_icon {
          margin-left: 0;
          background-image: url("../../assets/img/nav/ic_txl_nor.png");
        }

        li.mail_icon.active {
          margin-left: 0;
          background-image: url("../../assets/img/nav/ic_txl_pre.png");
        }

        li.info_icon {
          background-image: url("../../assets/img/nav/icon.png");
          position: relative;
          .info-num{
            width: 18px;
            height: 18px;
            position: absolute;
            background-color: #FC5A44;
            border-radius: 50%;
            top: -7px;
            right: -7px;
            color: #ffffff;
            text-align: center;
            line-height: 18px;
            font-size: 12px;
          }
        }

        li.info_icon.active {
          background-image: url("../../assets/img/nav/ic_bell_pre.png");
        }

        li.ht_icon {
          background-image: url("../../assets/img/nav/icon1.png");
        }

        li.ht_icon.active {
          background-image: url("../../assets/img/nav/ic_set_pre.png");
        }

        li.help_icon {
          background-image: url("../../assets/img/nav/icon2.png");
        }

        li.help_icon.active {
          background-image: url("../../assets/img/nav/ic_help_pre.png");
        }
      }

      .user-info {
        padding-left: 22px;
        /*overflow: hidden;*/
        cursor: pointer;
        position: relative;

        .user-img {
          margin-top: 20px;
          float: left;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }

        .user-name {
          margin-left: 16px;
          float: left;
          font-size: 14px;
          color: #666666;
          line-height: 70px;
        }

        .set-box {
          display: none;
          position: absolute;
          width: 88px;
          height: 150px;
          background-color: #ffffff;
          border-radius: 6px;
          border: 1px solid #EEEEEE;
          top: 60px;
          z-index: 1000;
          padding: 0 13px;
          line-height: 36px;
          text-align: center;
          color: #666666;
          font-size: 12px;

          > p:first-child {
            border-bottom: 1px solid #EEEEEE;
          }

          > p:nth-child(2) {
            border-bottom: 1px solid #EEEEEE;
          }
          > p:nth-child(3) {
            border-bottom: 1px solid #EEEEEE;
          }
        }
      }

      .user-info:hover {
        .set-box {
          display: block;
        }
      }
    }
  }

  .my-code {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;

    .my-code-inner {
      width: 460px;
      height: 208px;
      background-color: #ffffff;
      border-radius: 6px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      padding: 32px 32px 24px 32px;

      > .title {
        line-height: 1.1;
        font-size: 16px;
        color: #454a55;
        position: relative;
        height: 48px;
        font-weight: 600;

        > i {
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          background-image: url("../../assets/img/close_icon.png");
          top: 0px;
          right: 0px;
          cursor: pointer;
        }
      }

      .code-info {
        color: #454A55;
        font-size: 14px;

        span {
          font-weight: bold;
        }

        margin-bottom: 23px;
      }

      .tips {
        color: #96A2AA;
        font-size: 12px;
      }

      .btn {
        position: absolute;
        background-color: #0755DB;
        width: 88px;
        line-height: 32px;
        height: 32px;
        text-align: center;
        border-radius: 6px;
        color: #ffffff;
        font-size: 14px;
        bottom: 24px;
        right: 32px;
        cursor: pointer;
      }
    }
  }
</style>

